<template>
<div>
<city-header></city-header>
<city-search :citylist="cities" @closeAl="handleCloseAl" @openAl="handleOpenAl"></city-search>
<all-cities :hot="hotCities" :all="cities" :letter="letter"></all-cities>
<alphabet :all="cities" @onClick="handleOnClick" @idxChange="handleIdxChange" v-if="isShow"></alphabet>
</div>
</template>

<script>
import axios from 'axios'
import CityHeader from '@pages/city/components/CityHeader'
import CitySearch from '@pages/city/components/CitySearch'
import AllCities from '@pages/city/components/AllCities'
import Alphabet from '@pages/city/components/Alphabet'
export default {
  name: 'City',
  components: {
    CityHeader,
    CitySearch,
    AllCities,
    Alphabet
  },
  data () {
    return {
      hotCities: [],
      cities: {},
      letter: '',
      isShow: true
    }
  },
  mounted () {
    this.getInfor()
  },
  methods: {
    getInfor () {
      axios.get('/api/city.json')
        .then((r) => {
          const data = r.data.data
          this.hotCities = data.hotCities
          this.cities = data.cities
        })
        .catch((e) => {
          console.log(e)
        })
    },
    handleOnClick (i) {
      this.letter = i
    },
    handleIdxChange (letter) {
      this.letter = letter
    },
    handleCloseAl () {
      this.isShow = false
    },
    handleOpenAl () {
      this.isShow = true
    }
  }
}
</script>
